<template>
	<view class="nav-wrap">
		<u-navbar height="50" :is-back="false" >
			<view class="nav-bar" :style='`background-color: ${background};`'>
				<view class="back-btn" @click="btnClick">
					<image :style="`color: ${textColor}`" class="image" src="../../static/images/icon_return.svg"></image>
					</view>
				<view class="title" :style="`color: ${textColor}`"><text>{{title}}</text></view>
				<view @click="rightClick" class="right-btn" :style="`color: ${rightColor};`"><text>{{rightText}}</text></view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		props: {
			"title": {
				type: String,
				default: ""
			},
			"isBack": {
				type: Boolean,
				default: true
			},
			"background": {
				type: String,
				default: "#FFF"
			},
			"textColor": {
				type: String, 
				default: "#2A2A2A"
			},
			"rightText": {
				type: String,
				default: ""
			},
			"rightColor": {
				type: String,
				default: "#2A2A2A"
			}
		},
		methods: {
			btnClick() {
				if (this.isBack) {
					uni.navigateBack();
				}
				this.$emit("click");
			},
			rightClick() {
				
				this.$emit("rightClick");
			}
		}
	}
</script>

<style lang="scss">
	.nav-wrap {
		.nav-bar {
			width: 100%;
			position: relative;
			height: 100%;
			box-shadow: 0px 2px 4px 0px rgba(70, 70, 70, 0.03);
		}
		
		.back-btn {
			float: left;
			margin-left: 20rpx;
			line-height: 100rpx;
			.image {
				width: 14rpx;
				height: 28rpx;
				color: #2A2A2A;
			}
		}
		.title {
			width: 70%;
			margin: 0 auto;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #2A2A2A;
			line-height: 100rpx;
		}
		
		.u-navbar:after {
			border: none !important;
		}
		.right-btn {
			position: absolute;
			width: 200rpx;
			text-align: center;
			right: 0;
			top: 30rpx;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #2A2A2A;
			line-height: 40rpx;
		}
	}
	
</style>
